<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1-1point-red</title>
</head>
<style>
  .a1 {
    color: red
  }

  .a2 {
    color: black
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>


<div id="app">
  <ul>
    <li v-for="(i,index) in movies" :class="getStyle(i)" @click="changeColor(index)">
      {{i}}
    </li>
  </ul>
  <h3>{{allName}}</h3>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      movies: ["大话西游", "石头记", "阿发达", "拯救地球"],
      index: -1
    },
    methods: {
      changeColor: function (index) {
        this.index = index;
      },
      getStyle(i) {
        return {a1: true, a2: this.movies[this.index] !== i}
      }
    },
    computed: {
      allName() {
        return this.movies
      }
    }
  })
</script>

</body>
</html>